<template>
  <div>
    <div style="text-align: right; padding: 0 20px">
      <el-radio-group v-model="type" @input="handle()">
        <el-radio label="1">近一周</el-radio>
        <el-radio label="2">近一月</el-radio>
      </el-radio-group>
    </div>
    <div style="margin: 20px 0">
      <el-descriptions :column="7" border direction="vertical">
        <el-descriptions-item
          v-for="(item, index) in count"
          :key="index"
          :label="item.name"
          >{{ item.value }}</el-descriptions-item
        >
      </el-descriptions>
    </div>
    <div class="box">
      <div class="box-lt">
        <div class="box-lt-num">
          <p>本月采购入库(吨)</p>
          <span>{{ week.value }}</span>
          <em>同比上周 {{ week.percent }}</em>
        </div>
        <div class="box-lt-num">
          <p>本月销售出库（吨）</p>
          <span>{{ month.value }}</span>
          <em>同比上月 {{ month.percent }}</em>
        </div>
      </div>
      <div class="box-rt">
        <line-stack name="countMiddle2" :data="countMiddle2" />
      </div>
    </div>
  </div>
</template>
<script>
import lineStack from '@c/echarts/line-stack'
export default {
  components: {
    lineStack,
  },
  data() {
    return {
      type: '1',
      count: [],
      week: {},
      month: {},
      countMiddle2: { categories: [], series: [] },
    }
  },
  created() {
    this.handle()
  },
  methods: {
    handle() {
      this.countMiddle1List()
      this.countMiddle2List()
      this.countMiddle3List()
    },
    countMiddle1List() {
      this.$axios
        .get(
          `/count/bigscreent2/countMiddle?type=${this.type}`
        )
        .then((data) => {
          this.count = []
          if (data.code == 200) {
            this.count = [
              {
                name: '采购计划',
                value: data.data.count1.value || 0,
              },
              {
                name: '采购订单',
                value: data.data.count2.value || 0,
              },
              {
                name: '采购入库',
                value: data.data.count3.value || 0,
              },
              {
                name: '验收入库',
                value: data.data.count4.value || 0,
              },
              {
                name: '采购损益',
                value: data.data.count5.value || 0,
              },
              {
                name: '销售出库',
                value: data.data.count6.value || 0,
              },
              {
                name: '合同',
                value: data.data.count7.value || 0,
              },
              {
                name: '采购询价',
                value: data.data.count8.value || 0,
              },
              {
                name: '采购金额',
                value: data.data.count9.value || 0,
              },
              {
                name: '待付款订单',
                value: data.data.count10.value || 0,
              },
              {
                name: '已发货订单',
                value: data.data.count11.value || 0,
              },
              {
                name: '待发货订单',
                value: data.data.count12.value || 0,
              },
            ]
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    countMiddle3List() {
      //同比增长
      this.$axios
        .get(
          `/count/bigscreent2/countMiddle3?type=${this.type}`
        )
        .then((data) => {
          this.week = {}
          this.month = {}
          if (data.code == 200) {
            let { week, month } = data.data
            this.week = week
            this.month = month
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    countMiddle2List() {
      //折线走势图
      this.$axios
        .get(
          `/count/bigscreent2/countMiddle2?type=${this.type}`
        )
        .then((data) => {
          this.countMiddle2 = { categories: [], series: [] }
          if (data.code == 200) {
            this.countMiddle2 = data.data
          } else {
            this.$message.error(data.msg)
          }
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  &-lt {
    width: 300px;
    &-num {
      border-radius: 4px;
      border: 1px solid #ebeef5;
      color: #303133;
      padding: 15px 25px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-top: 25px;
      p {
        font-size: 16px;
        font-weight: 400;
        color: #b1b1b1;
      }
      span {
        display: block;
        font-size: 32px;
        font-weight: 400;
        color: #000000;
        margin: 10px 0;
      }
      em {
        display: block;
        font-size: 16px;
        font-weight: 400;
        color: #b1b1b1;
        text-align: right;
      }
    }
  }
  &-rt {
    flex: 1;
  }
}
</style>
